<!-- filepath: frontend/src/pages/TestSuiteManager.vue -->
<template>
    <div>
      <el-page-header content="测试集管理" />
      <el-card>
        <el-button type="primary" @click="showSuiteDialog = true">新建测试集</el-button>
        <el-table :data="suites">
          <el-table-column prop="name" label="测试集名称" />
          <el-table-column prop="desc" label="描述" />
          <el-table-column label="操作">
            <template #default="scope">
              <el-button @click="editSuite(scope.row)">编辑</el-button>
              <el-button @click="deleteSuite(scope.row)">删除</el-button>
              <el-button @click="runSuite(scope.row)">批量执行</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-card>
      <el-dialog v-model="showSuiteDialog" title="新建测试集">
        <el-form :model="newSuite">
          <el-form-item label="测试集名称">
            <el-input v-model="newSuite.name" />
          </el-form-item>
          <el-form-item label="描述">
            <el-input v-model="newSuite.desc" />
          </el-form-item>
        </el-form>
        <template #footer>
          <el-button @click="createSuite">创建</el-button>
        </template>
      </el-dialog>
    </div>
  </template>
  <script lang="ts" setup>
  import { ref } from 'vue';
  const suites = ref([
    { name: '登录模块', desc: '登录相关功能测试' },
  ]);
  const showSuiteDialog = ref(false);
  const newSuite = ref({ name: '', desc: '' });
  function createSuite() {
    suites.value.push({ ...newSuite.value });
    showSuiteDialog.value = false;
    newSuite.value = { name: '', desc: '' };
  }
  function editSuite(suite) {}
  function deleteSuite(suite) {}
  function runSuite(suite) {}
  </script>